{% extends "base.html" %}

{% block content %}
<div class="card">
    <div class="card-header">
        <h3 class="card-title">编辑员工信息</h3>
    </div>
    <div class="card-body">
        <form method="POST" enctype="multipart/form-data">
            <!-- 基本信息部分 -->
            <div class="row mb-4">
                <div class="col-12">
                    <h5 class="mb-3">基本信息</h5>
                    <div class="row">
                        <div class="col-md-6">
                            <div class="mb-3">
                                <label for="name" class="form-label">姓名</label>
                                <input type="text" class="form-control" id="name" name="name" value="{{ employee.name }}" required>
                            </div>
                            <div class="mb-3">
                                <label for="department" class="form-label">部门</label>
                                <input type="text" class="form-control" id="department" name="department" value="{{ employee.department }}" required>
                            </div>
                            <div class="mb-3">
                                <label for="position" class="form-label">职位</label>
                                <input type="text" class="form-control" id="position" name="position" value="{{ employee.position }}" required>
                            </div>
                        </div>
                        <div class="col-md-6">
                            <div class="mb-3">
                                <label for="phone" class="form-label">手机号</label>
                                <input type="tel" class="form-control" id="phone" name="phone" value="{{ employee.phone }}" required>
                            </div>
                            <div class="mb-3">
                                <label for="id_card" class="form-label">身份证号</label>
                                <input type="text" class="form-control" id="id_card" name="id_card" value="{{ employee.id_card }}" required>
                            </div>
                        </div>
                    </div>
                </div>
            </div>

            <!-- 证件信息部分 -->
            <div class="row mb-4">
                <div class="col-12">
                    <h5 class="mb-3">证件信息</h5>
                    <!-- 身份证信息 -->
                    <div class="row mb-4">
                        <div class="col-md-6">
                            <label for="id_card_front" class="form-label">身份证正面</label>
                            {% if employee.id_card_front %}
                                <div class="mb-2">
                                    <img src="{{ url_for('static', filename=employee.id_card_front) }}" alt="身份证正面" class="img-thumbnail" style="max-height: 150px;">
                                </div>
                            {% endif %}
                            <input type="file" class="form-control" id="id_card_front" name="id_card_front" accept="image/*">
                        </div>
                        <div class="col-md-6">
                            <label for="id_card_back" class="form-label">身份证反面</label>
                            {% if employee.id_card_back %}
                                <div class="mb-2">
                                    <img src="{{ url_for('static', filename=employee.id_card_back) }}" alt="身份证反面" class="img-thumbnail" style="max-height: 150px;">
                                </div>
                            {% endif %}
                            <input type="file" class="form-control" id="id_card_back" name="id_card_back" accept="image/*">
                        </div>
                    </div>

                    <!-- 学历学位证书 -->
                    <div class="row mb-4">
                        <div class="col-md-6">
                            <label for="diploma" class="form-label">学历证书</label>
                            {% if employee.diploma %}
                                <div class="mb-2">
                                    {% if employee.diploma.endswith('.pdf') %}
                                        <a href="{{ url_for('static', filename=employee.diploma) }}" target="_blank" class="btn btn-sm btn-info">查看PDF</a>
                                    {% else %}
                                        <img src="{{ url_for('static', filename=employee.diploma) }}" alt="学历证书" class="img-thumbnail" style="max-height: 150px;">
                                    {% endif %}
                                </div>
                            {% endif %}
                            <input type="file" class="form-control" id="diploma" name="diploma" accept="image/*,.pdf">
                        </div>
                        <div class="col-md-6">
                            <label for="degree" class="form-label">学位证书</label>
                            {% if employee.degree %}
                                <div class="mb-2">
                                    {% if employee.degree.endswith('.pdf') %}
                                        <a href="{{ url_for('static', filename=employee.degree) }}" target="_blank" class="btn btn-sm btn-info">查看PDF</a>
                                    {% else %}
                                        <img src="{{ url_for('static', filename=employee.degree) }}" alt="学位证书" class="img-thumbnail" style="max-height: 150px;">
                                    {% endif %}
                                </div>
                            {% endif %}
                            <input type="file" class="form-control" id="degree" name="degree" accept="image/*,.pdf">
                        </div>
                    </div>
                </div>
            </div>

            <!-- 其他证书部分 -->
            <div class="row mb-4">
                <div class="col-12">
                    <h5 class="mb-3">其他证书</h5>
                    <div id="other-certificates">
                        {% if employee.other_certificates %}
                            {% for cert in employee.other_certificates %}
                                <div class="certificate-entry border rounded p-3 mb-3">
                                    <div class="mb-3">
                                        <label class="form-label">证书名称</label>
                                        <input type="text" class="form-control" name="cert_name" value="{{ cert.name }}" required>
                                    </div>
                                    <div class="mb-3">
                                        <label class="form-label">证书文件</label>
                                        {% if cert.image %}
                                            <div class="mb-2">
                                                {% if cert.image.endswith('.pdf') %}
                                                    <a href="{{ url_for('static', filename=cert.image) }}" target="_blank" class="btn btn-sm btn-info">查看PDF</a>
                                                {% else %}
                                                    <img src="{{ url_for('static', filename=cert.image) }}" alt="{{ cert.name }}" class="img-thumbnail" style="max-height: 150px;">
                                                {% endif %}
                                            </div>
                                        {% endif %}
                                        <input type="file" class="form-control" name="cert_file" accept="image/*,.pdf">
                                    </div>
                                    <button type="button" class="btn btn-danger btn-sm remove-certificate">删除证书</button>
                                </div>
                            {% endfor %}
                        {% endif %}
                    </div>
                    <button type="button" class="btn btn-secondary" id="add-certificate">添加证书</button>
                </div>
            </div>

            <div class="mt-4">
                <button type="submit" class="btn btn-primary">保存</button>
                <a href="{{ url_for('employee.index') }}" class="btn btn-secondary">返回</a>
            </div>
        </form>
    </div>
</div>

<!-- 添加证书模板 -->
<template id="certificate-template">
    <div class="certificate-entry border rounded p-3 mb-3">
        <div class="mb-3">
            <label class="form-label">证书名称</label>
            <input type="text" class="form-control" name="cert_name" required>
        </div>
        <div class="mb-3">
            <label class="form-label">证书文件</label>
            <input type="file" class="form-control" name="cert_file" accept="image/*,.pdf">
        </div>
        <button type="button" class="btn btn-danger btn-sm remove-certificate">删除证书</button>
    </div>
</template>

{% block scripts %}
<script>
document.addEventListener('DOMContentLoaded', function() {
    const certificatesContainer = document.getElementById('other-certificates');
    const addButton = document.getElementById('add-certificate');
    const template = document.getElementById('certificate-template');

    // 添加证书
    addButton.addEventListener('click', function() {
        const newCertificate = template.content.cloneNode(true);
        certificatesContainer.appendChild(newCertificate);
        
        // 更新所有删除按钮的事件监听
        updateRemoveButtons();
    });

    // 更新删除按钮事件监听
    function updateRemoveButtons() {
        document.querySelectorAll('.remove-certificate').forEach(button => {
            button.onclick = function() {
                this.closest('.certificate-entry').remove();
            };
        });
    }

    // 初始化现有证书的删除按钮
    updateRemoveButtons();
});
</script>
{% endblock %}
{% endblock %} 